import React, {useState} from 'react';
import {Cascader, Form, Input, message, Modal, Select} from 'antd';
import {http, chinaDivision} from 'libs';
import store from './store';

export default function IForm() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  function handleSubmit() {
    setLoading(true);
    const formData = form.getFieldsValue();
    formData['id'] = store.record.id;
    formData['role_ids'] = typeof formData.role_ids === 'number' ? [formData.role_ids] : formData.role_ids;
    http.post('/api/customer/', formData)
      .then(() => {
        message.success('操作成功');
        store.set('formVisible', false);
        store.fetchRecords()
      })
      .finally(() => setLoading(false))

  }
// id=1,sn=zs,name=丹尼斯超市,contact=张三,phone=186xxx,region=[河南省,郑州市,中原区],address=中原路88号
  return (
    <Modal
      open
      maskClosable={false}
      title={store.record.id ? '编辑客户' : '添加客户'}
      onCancel={store.vSet('formVisible', false)}
      confirmLoading={loading}
      onOk={handleSubmit}>
      <Form autoComplete='off' form={form} initialValues={store.record} labelCol={{span: 6}} wrapperCol={{span: 14}}>

        <Form.Item required name="name" label="客户名称">
          <Input placeholder="请输入"/>
        </Form.Item>
        <Form.Item required name="sn" label="客户编号">
          <Input placeholder="请输入"/>
        </Form.Item>
        <Form.Item required name="contact" label="联系人">
          <Input placeholder="请输入"/>
        </Form.Item>
        <Form.Item required name="phone" label="联系电话">
          <Input placeholder="请输入"/>
        </Form.Item>
        <Form.Item label="地址">
          <Form.Item name="region">
            <Cascader options={chinaDivision}
                      fieldNames={{ label: 'label', value: 'label' }}
                      placeholder="请选择省市区" />
          </Form.Item>
          <Form.Item name="address">
            <Input.TextArea autoSize={{ minRows: 1, maxRows: 3 }} placeholder="请输入详细地址" />
          </Form.Item>
        </Form.Item>


      </Form>
    </Modal>
  )
}